<template lang="html">

  <div class="invitee">
    <Header>
      <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
      <span slot="title">我的邀请用户</span>
    </Header>
    <div class="tips">
      邀请用户注册赚积分，用户购买任何产品，您将获得一定比例返点和佣金。
    </div>
    <div class="empty-show-box">
      <p class="empty-box-text">还没有邀请用户注册</p>
      <p class="load-more">
        <mu-button color="success" to="/qrcode">
          <mu-icon value="directions_run"></mu-icon>
          马上去邀请
        </mu-button>
      </p>
    </div>
  </div>

</template>

<script lang="js">

  // 引入header
  import Header from '@/components/Header';
  
  export default  {
    name: 'invitee',
    props: [],
    mounted () {

    },
    data () {
      return {

      }
    },
    methods: {
      // 后退
      back() {
        this.$router.go(-1);
      },
    },
    computed: {

    },
    // 注册组件
    components: { Header },
}


</script>

<style scoped lang="scss">
  .invitee {
    .header {
      position: relative;
      .mu-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span {
        display: block;
        text-align: center;
      }
    }
    .tips {
      padding: 20px 10px 0;
      text-indent: 2em;
      color: #f44336;
    }
    .empty-show-box {
      .empty-box-text {
        color: #999;
        font-size: 16px;
        text-align: center;
        padding: 60px;
      }
      .load-more {
        padding: 20px 40px;
        text-align: center;
        a {
          width: 100%;
          font-size: 15px;
          height: 44px;
        }
      }
    }
  }
</style>
